.index {
  width: 100%;
  height: 100vh;
  .mapDiv {
    width: 100%;
    height: 60vh;
    position: relative;
  }
  .infoDiv {
    bottom: 20px;
    position: relative;
    width: 100%;
    height: 40vh;
    background-color: rgb(245, 246, 250);
    border-radius: 30px 30px 0 0;
    display: flex;
    flex-flow: column;
    align-items: center;
    z-index: 90999;
    .infoTitle {
      width: 100%;
      height: 120px;
      background-color: rgb(226, 165, 238);
      border-radius: 30px 30px 0 0;
      position: absolute;
      top: -100px;
    }
    .infoCenter {
      position: absolute;
      top: -10px;
      width: 100%;
      border-radius: 30px 30px 0 0;
      background-color: rgb(245, 246, 250);
      display: flex;
      flex-flow: column;
      align-items: center;
      .infoTab {
        width: 100%;
        height: 80px;
        margin-top: 10px;
        background-color: #f5f6fa;
        border-radius: 30px 30px 0 0;
        display: flex;
        align-items: center;
        position: relative;
        div {
          font-size: 30px;
          margin-left: 50px;
          color: rgb(166, 167, 171);
          width: 140px;
        }
        .selectDiv {
          font-weight: 700;
          color: #000;
          font-size: 34px;
          // border-bottom: 20px solid #ffce1d;
          &::before {
            position: absolute;
            bottom: 0px;
            // left: 65px;
            width: 130px;
            border-bottom: 15px solid #ffcc1c;
            border-radius: 10px;
            content: "";
          }
        }

        .noSelectDiv {
          font-weight: 400;
          font-size: 30px;
          color: rgb(166, 167, 171);
        }
      }
      .addressInput {
        margin-top: 20px;
        width: 95%;
        min-height: 250px;
        margin-bottom: 20px;
        border-radius: 28px;
        display: flex;
        flex-flow: column;
        align-items: center;
        background-color: rgb(255, 255, 255);
        .startAddress {
          width: 98%;
          display: flex;
          align-items: center;
          margin-top: 15px;
          .inputAddress {
            width: 90%;
            font-size: 26px;
            margin-left: 15px;
            min-height: 50px;
          }
        }
        .endAddress {
          width: 98%;
          min-height: 140px;
          background-color: #f5f6fa;
          border-radius: 20px;
          margin-top: 20px;
          margin-bottom: 25px;
          display: flex;
          align-items: center;
          .endAddressInput {
            margin-left: 15px;
            font-weight: 700;
          }
        }
      }
      .infoBottom {
        width: 98%;
        height: 160px;
        margin-top: 10px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .iconFunc {
          width: 20%;
          height: 100%;
          display: flex;
          flex-flow: column;
          align-items: center;
          &-card {
            width: 100%;
            height: 110px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          &-name {
            width: 100%;
            height: 40px;
            font-size: 28px;
            text-align: center;
            line-height: 40px;
          }
        }
      }
    }
  }
}
